<template>
  <div id="app">
    <!-- 饮食打卡标题 -->
    <div class="title-bar">
      <div class="back-arrow">
        <svg 
        t="1747792003449" 
        class="icon" 
        viewBox="0 0 1024 1024" 
        version="1.1" 
        xmlns="http://www.w3.org/2000/svg" 
        width="25.5" 
        height="25.5"
        @click="goBack"
      >
        <path d="M658.24 210.304H292.544V64L0 283.456l292.544 219.456V356.544H658.24c124.352 0 219.52 95.04 219.52 219.456s-95.104 219.456-219.52 219.456H292.544V941.76H658.24C855.744 941.76 1024 780.8 1024 576S863.104 210.304 658.24 210.304z" 
        fill="#2c2c2c"
      ></path>
      </svg>
      </div>
      <h2>饮食记录</h2>
      
    </div>
    
    <!-- 饮食图标展示区 -->
    <div class="food-grid">
      <div class="food-item" v-for="item in foodItems" :key="item.id" @click="navigateToCart(item)">
        <div class="food-icon">{{ item.icon }}</div>
        <div class="food-name">{{ item.name }}</div>
        <div class="food-count">{{ item.count }} 千卡</div>
      </div>
    </div>
    
    <!-- 添加按钮 -->
    <div class="add-button">
      <button @click="showAddModal = true">+</button>
    </div>
    
    <!-- 添加模态框 -->
    <div v-if="showAddModal" class="modal">
      <div class="modal-content">
        <h3>选择要添加的饮食类型</h3>
        <div class="add-options">
          <div 
            class="add-option"
            v-for="option in addOptions" 
            :key="option.id"
            @click="addFood(option)"
          >
            <div class="add-option-icon">{{ option.icon }}</div>
            <div class="add-option-name">{{ option.name }}</div>
          </div>
        </div>
        <button class="close-button" @click="showAddModal = false">关闭</button>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue';

export default {
  name: 'FoodTracker',
  setup() {
    const foodItems = ref([
      { id: 1, name: '早餐', icon: '🍜', count: 500 }, // 添加初始度数
      { id: 2, name: '午餐', icon: '🍲', count: 600 }, // 添加初始度数
      { id: 3, name: '晚餐', icon: '🍲', count: 550 }, // 添加初始度数
      { id: 4, name: '加餐', icon: '🍒', count: 300 }  // 添加初始度数
    ]);
    
    const showAddModal = ref(false);
    
    // 添加选项
    const addOptions = ref([
      { id: 5, name: '早餐', icon: '🍜', count: 500 },
      { id: 6, name: '午餐', icon: '🍲', count: 600 },
      { id: 7, name: '晚餐', icon: '🍲', count: 550 },
      { id: 8, name: '加餐', icon: '🍒', count: 300 }
    ]);
    
    // 添加食物类型
    const addFood = (food) => {
      const newId = foodItems.value.length > 0 
        ? Math.max(...foodItems.value.map(item => item.id)) + 1 
        : 1;
      
      foodItems.value.push({
        id: newId,
        name: food.name,
        icon: food.icon,
        count: food.count // 添加度数值
      });
      
      showAddModal.value = false;
    };
    
    // 页面跳转方法
    const navigateToCart = (item) => {
      // 使用 uni.navigateTo 方法跳转到购物车页面
      uni.navigateTo({
        url: `/pages/cart/cart-page?foodId=${item.id}&foodName=${item.name}&foodCount=${item.count}`
      });
    };
    const goBack = () => {
      // 使用 uni.navigateBack 方法返回上一页
      uni.navigateBack();
    };
    // 页面加载和卸载时的事件监听
    onMounted(() => {
      console.log('FoodTracker 组件已挂载');
    });
    
    onUnmounted(() => {
      console.log('FoodTracker 组件已卸载');
    });
    
    return {
      foodItems,
      showAddModal,
      addOptions,
      goBack,
      addFood,
      navigateToCart // 返回导航方法
    };
  }
}
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
}

/* 顶部状态栏样式 */
.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
}

.time {
  font-size: 16px;
  font-weight: bold;
}

.status-indicators {
  display: flex;
  gap: 15px;
}

/* 标题栏样式 */
.title-bar {
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
}

.back-arrow {
  margin-right: 10px;
}

.title-bar h2 {
  font-size: 18px;
  font-weight: bold;
}

/* 食物展示网格样式 */
.food-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: 20px;
  background-color: #d0e1f9;
  min-height: 300px;
  border-radius: 15px;
  margin: 20px;
}

.food-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
  cursor: pointer; /* 添加鼠标指针样式 */
}

.food-icon {
  font-size: 50px;
  margin-bottom: 15px;
}

.food-name {
  font-size: 16px;
}

.food-count {
  font-size: 14px;
  color: #666;
  margin-top: 10px;
}

/* 添加按钮样式 */
.add-button {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
}

.add-button button {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #d0e1f9;
  border: none;
  font-size: 30px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 模态框样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  width: 80%;
  max-width: 400px;
}

.add-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin: 20px 0;
}

.add-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
}

.add-option-icon {
  font-size: 30px;
  margin-bottom: 10px;
}

.close-button {
  margin-top: 15px;
  padding: 10px 20px;
  background-color: #d0e1f9;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
</style>